<template>
	<view class="">
		<navigator url="/pages/mall-brother/mall-brother" open-type="reLaunch">儿组件(去登录)</navigator> <!--路由跳转-->
	</view>

	<image :src="avatar" class="logo"></image>{{username}} <!--props接收基本类型-->
	<image :src="obj.avatar" class="logo"></image>{{obj.name}} <!--props接收对象-->

	<slot name="child"></slot> <!--插槽:父传子-->

	<button @click="$emit('add', 1)">$emit子传父事件1</button> <!--$emit子传父数据方式1(子必须是组件,不能是路由页面)-->
	<button @click="onClick">$emit子传父事件2</button> <!--$emit子传父数据方式2(子必须是组件,不能是路由页面)-->

	<scroll-view scroll-y="true" ref="scroll">
	</scroll-view>
	
	{{count}}
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		onBeforeUpdate,
		onUpdated,
		onBeforeUnmount,
		onUnmounted
	} from "vue"
	let data = ref(1) //响应式数据
	const scroll = ref(null)

	// const props = defineProps(['username', 'avatar']) //props接收基本类型
	// const props = defineProps({ //props接收基本类型(设置默认值)
	// 	username: {
	// 		type: String,
	// 		default: '匿名' //非必传默认值
	// 	},
	// 	avatar: {
	// 		type: String,
	// 		required: true //必传
	// 	}
	// })
	// defineProps(['obj']) //props接收对象
	defineProps({ //props接收对象(设置默认值)
		obj: {
			type: Object,
			default () { //默认值函数
				return {
					name: "匿名",
					avatar: "../../static/logo.png"
				}
			}
		}
	})

	const emit = defineEmits(["add", "change"]) //$emit子传父数据方式2
	function onClick() { //$emit子传父数据方式2
		emit("add", 1)
	}

	const count = ref(100) //defineExpose暴露属性
	const updateCount = function() { //defineExpose暴露方法
		count.value++
	}
	defineExpose({ //defineExpose暴露子组件属性方法,父直接操作子属性方法,因为子有保护机制
		count, //暴露属性
		updateCount //暴露方法
	})

	//组件生命周期(vue3钩子函数)
	// beforeCreate(() => { //vue2实例初始化前被调用

	// })
	// created(() => { //vue2实例创建后被调用

	// })
	onBeforeMount(() => { //挂载前被调用

	})
	onMounted(() => { //**挂载后被调用
		console.log('scroll:' + scroll.value)
	})
	onBeforeUpdate(() => { //数据更新时被调用

	})
	onUpdated(() => { //数据更新后被调用

	})
	onBeforeUnmount(() => { //实例销毁前被调用

	})
	onUnmounted(() => { //实例销毁后被调用

	})
</script>

<style lang="scss" scoped>
	//嵌套css,样式作用域(样式仅当前组件生效)
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>